import { FC, createRef, useRef, RefObject, useState } from "react";

interface Props {}
const Index: FC<Props> = () => {
  const [num, setNum] = useState(0);
  // 传统： 1-加id属性，2-通过document.qs
  // react class：1-加ref属性，2-通过this.refs.标识
  // react fun：  1-创建ref， 2-视图使用，3-操作
  // -  const iptRef = createRef()     重复初始化
  // -  const iptRef = useRef()        仅初始化一次

  const iptRef1: RefObject<HTMLInputElement> = createRef();
  const iptRef2: RefObject<HTMLInputElement> = useRef(null);

  console.log("立马打印或者后续渲染打印", iptRef1);
  console.log("立马打印或者后续渲染打印", iptRef2);
  return (
    <fieldset>
      <legend>07-父操作子铺垫：操作DOM</legend>

      <input type="text" id="框框1号" ref={iptRef1} />
      <input type="text" id="框框2号" ref={iptRef2} />

      <button
        onClick={() => {
          console.log(iptRef1.current);
          console.log(iptRef2.current);
        }}
      >
        打印DOM
      </button>

      <button onClick={() => setNum(num + 1)}>更新num数据</button>
    </fieldset>
  );
};

export default Index;
